<template>
  <div class="MerchantDetails">
    <van-list
      v-model="merchantProduct[active].loading"
      :finished="merchantProduct[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <img
        class="MerchantDetails_logo"
        :src="$base.baseImg + merchantDetails.logo"
        alt=""
      />
      <van-row class="MerchantDetails_box">
        <van-col span="21">
          <div>
            <h4 class="MerchantDetails_title">
              {{ merchantDetails.mName }}
            </h4>
            <a
              class="MerchantDetails_phone"
              :href="'tel:' + merchantDetails.phone"
            >
              {{ merchantDetails.phone }}
            </a>
            <p class="MerchantDetails_address">
              {{ merchantDetails.address }}
            </p>
          </div>
        </van-col>
        <van-col span="3" @click="openLocation" class="MerchantDetails_img">
          <img src="@/assets/address.png" />
        </van-col>
      </van-row>
      <!-- 商品列表 -->
      <van-tabs v-model="active" color="#B99267">
        <van-tab title="价格">
          <ProductList
            @add-cart="addCart"
            :prosList="merchantProduct[0].prosList"
          />
        </van-tab>
        <van-tab title="销量">
          <ProductList
            @add-cart="addCart"
            :prosList="merchantProduct[1].prosList"
          />
        </van-tab>
      </van-tabs>
    </van-list>
    <van-action-sheet v-model="show">
      <div class="popup">
        <p>购物车</p>
        <div class="popup_box">
          <div v-if="cartList.length > 0">
            <van-row
              class="popup_box_item"
              v-for="(item, index) in cartList"
              :key="index"
            >
              <van-col span="6">
                <img class="img" :src="$base.baseImg + item.img" />
              </van-col>
              <van-col span="18">
                <div class="popup_box_right">
                  <h3 class="title">{{ item.proName }}</h3>
                  <p class="dec">￥ {{ (item.price / 100).toFixed(2) }}</p>
                  <van-stepper
                    v-model="item.num"
                    class="stepper"
                    theme="round"
                    :min="0"
                    button-size="22"
                    disable-input
                    @change="
                      (e) => {
                        delcartItem(e, index);
                      }
                    "
                  />
                </div>
              </van-col>
            </van-row>
          </div>
          <van-empty v-else description="暂无数据" />
        </div>
        <div class="popup_button">
          <van-row gutter="20">
            <van-col span="17">
              <p>
                总计: <span>￥{{ (cartAmount / 100).toFixed(2) }}</span>
              </p>
            </van-col>
            <van-col span="7">
              <van-button
                block
                size="small"
                @click="buyPro"
                round
                color="#D4B066"
                >立即支付</van-button
              >
            </van-col>
          </van-row>
        </div>
      </div>
    </van-action-sheet>
    <div class="gouwucheIcon" @click="showCartList">
      <span>{{ cartNum }}</span>
      <img src="@/assets/gouwucheIcon.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import ProductList from "@/components/ProductList.vue";
import {
  Col,
  Row,
  Tab,
  Tabs,
  List,
  ActionSheet,
  Stepper,
  Button,
  Toast,
  Empty,
} from "vant";
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(List);
Vue.use(ActionSheet);
Vue.use(Stepper);
Vue.use(Button);

Vue.use(Empty);
@Component({
  components: {
    ProductList,
  },
})
export default class MerchantDetails extends Vue {
  private active: number = 0;
  private show: boolean = false;
  private merchantDetails = {
    lat: "",
    lon: "",
    name: "",
    mName: "",
    address: "",
    phone: "",
  };
  private merchantProduct = [
    {
      form: {
        lat: "0",
        lon: "0",
        key: "",
        mid: Number(this.$route.params.id),
        online: 0,
        order: 1,
        page: 1,
        size: 20,
      },
      prosList: [],
      loading: false,
      finished: false,
    },
    {
      form: {
        lat: "0",
        lon: "0",
        key: "",
        mid: Number(this.$route.params.id),
        online: 0,
        order: 3,
        page: 1,
        size: 20,
      },
      prosList: [],
      loading: false,
      finished: false,
    },
  ];
  private cartList: any[] = [];
  private cartAmount = 0;
  private cartNum = 0;

  private mounted() {
    this.$common.setWxConfig(window.location.href).then((res: boolean) => {
      if (res) {
        this.$common.getAuthToken(this.getMerchantDetails);
      }
    });
  }

  private getMerchantDetails() {
    this.$post(`getMerchant`, {
      mid: Number(this.$route.params.id),
    }).then((res: any) => {
      if (res.code == 0) {
        this.merchantDetails = res.data;
      }
    });
  }
  private onLoad() {
    this.getMerchantProduct();
  }
  private getMerchantProduct() {
    this.$post(`pros`, this.merchantProduct[this.active].form).then(
      (res: any) => {
        if (res.code == 0) {
          this.merchantProduct[this.active].loading = false;
          this.merchantProduct[this.active].prosList = this.merchantProduct[
            this.active
          ].prosList.concat(res.data.list);
          this.merchantProduct[this.active].form.page += 1;
          if (res.data.list.length < 20) {
            this.merchantProduct[this.active].finished = true;
          }
        }
      }
    );
  }
  private addCart(e: any) {
    if (e.online == 0) {
      let index = this.cartList.findIndex((item) => {
        return e.sku == item.sku;
      });
      if (index == -1) {
        this.cartList.push({
          sku: e.sku,
          num: 1,
          img: e.img[0],
          proName: e.proName,
          price: e.price,
        });
      } else {
        this.cartList[index].num += 1;
      }
      this.cartAmountSum();
    }
  }
  private buyPro() {
    if (this.cartList.length == 0) {
      Toast.fail(`无商品结算`);
      return;
    }
    this.$router.push({
      path: "/submitOrder/0",
      query: {
        skuList: JSON.stringify(
          this.cartList.map((item) => {
            return {
              num: item.num,
              sku: item.sku,
            };
          })
        ),
        online: "0",
      },
    });
  }
  private delcartItem(e: number, index: number) {
    if (e == 0) {
      this.cartList.splice(index, 1);
      console.log(this.cartList);
    }
    this.cartAmountSum();
  }
  private cartAmountSum() {
    let amount = 0;
    let Num = 0;
    this.cartList.map((item) => {
      amount += item.price * item.num;
      Num += item.num;
    });
    this.cartAmount = amount;
    this.cartNum = Num;
  }
  private showCartList() {
    this.show = true;
  }
  private openLocation() {
    let that = this;
    this.$wx.ready(function () {
      that.$wx.openLocation({
        latitude: parseFloat(that.merchantDetails.lat),
        longitude: parseFloat(that.merchantDetails.lon),
        name: that.merchantDetails.mName,
        address: that.merchantDetails.address,
        scale: 25,
        infoUrl: "",
      });
    });
  }
}
</script>

<style lang="scss">
.MerchantDetails {
  .MerchantDetails_logo {
    width: 100%;
    max-height: 400px;
  }
  .MerchantDetails_box {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 5px;
    .MerchantDetails_title {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
      line-height: 1.5;
    }
    .MerchantDetails_phone {
      font-size: 30px;
      font-weight: 300;
      line-height: 1.5;
    }
    .MerchantDetails_address {
      font-size: 28px;
      font-weight: 300;
      color: #333333;
      line-height: 1.5;
    }

    .MerchantDetails_img {
      padding-top: 30px;
      text-align: right;
      img {
        width: 40px;
        // display: block;
      }
    }
  }
  .popup {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    position: relative;
    & > p {
      width: 100%;
      text-align: center;
      line-height: 70px;
      background-color: #e9c790;
      color: #fff;
    }
    & > .popup_box {
      width: 100%;
      padding: 20px;
      max-height: 700px;
      min-height: 400px;
      box-sizing: border-box;
      margin-bottom: 100px;
      overflow: auto;
      .popup_box_item {
        padding: 5px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #dbdbdb;
      }

      .img {
        width: 100%;
        display: block;
        height: 130px;
        border-radius: 10px;
      }
      .popup_box_right {
        width: 100%;
        overflow: hidden;
        padding-left: 10px;
        box-sizing: border-box;
        .title {
          font-size: 28px;
          font-weight: 400;
          color: #000000;
          line-height: 2;
        }
        .dec {
          font-size: 24px;
          font-weight: 300;
          color: #f53131;
          line-height: 2;
        }
        .stepper {
          float: right;
        }
      }
    }
    & > .popup_button {
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 10px 20px;
      box-sizing: border-box;
      overflow: hidden;
      p {
        font-size: 28px;
        color: #333333;
        line-height: 2;
        text-align: right;
        span {
          color: #f53131;
        }
      }
    }
  }
  .gouwucheIcon {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 30px;
    right: 30px;
    & > img {
      width: 100%;
      display: block;
    }
    & > span {
      background-color: red;
      color: #fff;
      position: absolute;
      right: 10px;
      top: 0;
      padding: 2px 10px;
      border-radius: 100%;
    }
  }
}
</style>